<template>
  <div class="footer">
    <h1>我是Footer</h1>
    <p>count的值是{{ count }}</p>

    <button @click="add">累加</button>
    <button @click="addN({ n: 2 })">每次加2</button>
    <button @click="decrement">累减</button>
    <button @click="addWait">等一秒后再加</button>
    <button @click="addNWait({ n: 5 })">等一秒后再加5</button>

    <!-- <button @click="getMovieList">获取电影列表</button>
    <ul>
      <li v-for="item in moveList" :key='item.tvId'>{{item.albumName}}</li>
    </ul> -->
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";

export default {
  name: "Footer",
  mounted() {
    console.log(this);
  },

  computed: {
    //3.mapState的对象写法,可以规定计算属性的名称
    ...mapState(['count']),

    // 2.数组写法
    // ...mapState(['count'])

    // 1.常规写法
    //    count(){
    //     return this.$store.state.count
    //    }
  },

  methods: {
    ...mapMutations(["add", "addN", "decrement"]),
    // add(){
    //   this.$store.commit('add')
    // }

    // addN(n) {
    //   this.$store.commit("addN",{n});
    // },

    ...mapActions(["addWait",'addNWait']),
    // addWait() {
    //   this.$store.dispatch("addWait");
    // },

    // addNWait(payload) {
    //   this.$store.dispatch("addNWait",payload);
    // },

    
  },
};
</script>

<style scoped>
.footer {
  margin: 30px;
  background: palevioletred;
}
</style>